import React, { useEffect, useState } from 'react';
import { ScrollView, Text, View,StyleSheet, Alert,Platform  } from 'react-native';
import {MapView, Circle, Polygon, Polyline, Marker, LatLng,CameraPosition,voidEvent} from 'react-native-amap3d';

import type * as ReactNative from "react-native";

const points = [
  {
    latitude: 39.806901,
    longitude: 116.397972,
  },
  {
    latitude: 39.806901,
    longitude: 116.297972,
  },
  {
    latitude: 39.906901,
    longitude: 116.397972,
  },
];

const points2 = [
  {
    latitude: 39.836901,
    longitude: 116.497972,
  },
  {
    latitude: 39.836901,
    longitude: 116.397972,
  },
  {
    latitude: 39.936901,
    longitude: 116.497972,
  },
];

const line1 = [
  { latitude: 40.006901, longitude: 116.097972 },
  { latitude: 40.006901, longitude: 116.597972 },
];
const line3 = [
  { latitude: 39.806901, longitude: 116.097972 },
  { latitude: 39.806901, longitude: 116.257972 },
  { latitude: 39.806901, longitude: 116.457972 },
  { latitude: 39.806901, longitude: 116.597972 },
];

function AMapDemo7() {
    const flag = 1
    const isHarmonyOS = Platform.OS !== 'ios' && Platform.OS !== 'android'
    const [type, setMapType] = useState(isHarmonyOS ? flag : flag - 1);

  return (
    <View style={styles.container}>
		<MapView 
    mapType={type}
    myLocationEnabled = {true}
    style={{ width:  `${100}%`, height: `${100}%` }}
    onPress={(event: ReactNative.NativeSyntheticEvent<LatLng>)=>{
      console.info("AMapViewEventType map3d demo " + event.nativeEvent.latitude + "===" + event.nativeEvent.longitude)
    }}
    onLongPress={(event: ReactNative.NativeSyntheticEvent<LatLng>)=>{
      console.info("AMapViewEventType map3d demo longevent===" + event.nativeEvent.latitude + "===" + event.nativeEvent.longitude)
    }}
    onLoad={(event: ReactNative.NativeSyntheticEvent<voidEvent>) => {
      Alert.alert("onLoad successful")
    }}
    > 
    <Circle
      strokeWidth={5}
      strokeColor="rgba(0, 255, 55, 0.5)"
      fillColor="rgba(255, 251, 0, 0.5)"
      radius={500}
      center={{ latitude: 39.906901, longitude: 116.397972 }}
    />
    <Polygon
      strokeWidth={5}
      strokeColor="rgba(0, 0, 255, 0.5)"
      fillColor="rgba(255, 0, 0, 0.5)"
      points={points}
    />
    <Polyline width={30}  color="rgba(255, 0, 221, 0.5)" points={line1} onPress={() => { console.info("AMapViewEventType map3d polyline onPress width 200")}} />
    <Marker
      draggable={true}
      position={{ latitude: 39.806901, longitude: 116.397972 }}
      anchor={{ x: 0.5, y: 1 }}

      onPress={() => Alert.alert("onPress")}
      onDragEnd={({ nativeEvent }) =>
        Alert.alert(`onDragEnd: ${nativeEvent.latitude}, ${nativeEvent.longitude}`)}
    />
    <Marker
        draggable={true}
        flat={false}
        position={{ latitude: 45.806901, longitude: 117.397972 }}
    >
        <Text
            style={{
                color: "#fff",
                backgroundColor: "#ff6977",
                margin:5,
                width:"14%",
            }}
        >
            {"testMarker"}
        </Text>
    </Marker>
    </MapView>
	</View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    flex: 1,
    paddingTop: 0,
  }
});
export default AMapDemo7;